<template>
  <div>
    <div class="container"
         :style='{ "minHeight": "100vh", "alignItems": "center", "background": "url(http://codegen.caihongy.cn/20230113/40f598e8fec44a46ad02a3ebb044efb5.jpg) no-repeat center top /  100% 100%,#fff", "display": "flex", "width": "100%", "backgroundSize": "cover", "backgroundPosition": "center center", "backgroundRepeat": "no-repeat", "justifyContent": "center" }'>
      <el-form ref="loginForm" :model="loginForm"
               :style='{ "padding": "0 40px 40px", "boxShadow": "0 0px 0px rgba(0, 0, 0, .1)", "margin": "0", "borderColor": "#85a92d #aad04e #85a92d #aad04e", "borderRadius": "0px", "background": "url(http://codegen.caihongy.cn/20230112/04f09805676347b69686b77e068e3b89.png) repeat-x center top / auto 80px,#fff", "borderWidth": "0px 1px 1px 1px", "width": "800px", "position": "relative", "borderStyle": "solid dashed dashed", "height": "auto" }'
               :rules="rules">
        <div v-if="false"
             :style='{ "margin": "0 0 10px 0", "color": "rgba(64, 158, 255, 1)", "textAlign": "center", "width": "100%", "lineHeight": "44px", "fontSize": "20px", "textShadow": "4px 4px 2px rgba(64, 158, 255, .5)" }'>
          USER / LOGIN
        </div>
        <div v-if="true"
             :style='{ "margin": "0px 0 60px", "color": "#333", "textAlign": "center", "width": "100%", "lineHeight": "68px", "fontSize": "20px", "textShadow": "0px 0px 0px rgba(64, 158, 255, .5)" }'>
          农产品质量安全追溯平台登录
        </div>
        <el-form-item class="list-item" :style='{ "width": "80%", "margin": "0 auto 20px" }' prop="username">
          <div v-if="false"
               :style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
            账号：
          </div>
          <input
              :style='{ "padding": "0 10px", "borderColor": "#ffc303", "color": "#333", "borderWidth": "0  0 1px", "width": "100%", "fontSize": "14px", "borderStyle": "solid", "height": "44px" }'
              v-model="loginForm.username" placeholder="请输入账户">
        </el-form-item>
        <el-form-item class="list-item" :style='{ "width": "80%", "margin": "0 auto 20px" }' prop="password">
          <div v-if="false"
               :style='{ "width": "64px", "lineHeight": "44px", "fontSize": "14px", "color": "rgba(64, 158, 255, 1)" }'>
            密码：
          </div>
          <input
              :style='{ "padding": "0 10px", "borderColor": "#ffc303", "color": "#333", "borderWidth": "0  0 1px", "width": "100%", "fontSize": "14px", "borderStyle": "solid", "height": "44px" }'
              v-model="loginForm.password" placeholder="请输入密码" type="password">
        </el-form-item>
        <el-form-item v-if="roles.length > 1" class="list-type" :style='{ "width": "80%", "margin": "20px auto 10px" }'
                      prop="role">
          <el-radio v-model="loginForm.tableName" :label="item.tableName" v-for="(item, index) in roles"
                    :key="index" @change.native="getCurrentRow(item)">{{ item.roleName }}
          </el-radio>
        </el-form-item>
        <el-form-item :style='{ "width": "80%", "padding": "10px 0 20px", "margin": "0 0px 0px 0" }'>
          <el-button
              :style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0", "color": "#333", "bottom": "-190px", "minWidth": "140px", "outline": "none", "borderRadius": "30px", "left": "160px", "background": "#a1c842", "width": "auto", "fontSize": "16px", "position": "absolute", "height": "46px" }'
              @click="submitForm('loginForm')">登录
          </el-button>
          <el-button
              :style='{ "border": "0", "cursor": "pointer", "padding": "0 24px", "margin": "0 5px", "outline": "none", "color": "#fff", "borderRadius": "4px", "background": "rgba(64, 158, 255, 1)", "display": "none", "width": "auto", "fontSize": "14px", "height": "44px" }'
              @click="resetForm('loginForm')">重置
          </el-button>
        </el-form-item>
        <div
            :style='{ "margin": "0 0px 0 0", "alignItems": "center", "flexWrap": "wrap", "textAlign": "right", "display": "flex", "width": "100%", "justifyContent": "center", "height": "auto" }'>
          <router-link
              :style='{ "cursor": "pointer", "border": "1px dashed #a1c842", "padding": "0 10px", "margin": "0 10px 0px 0", "color": "#85ac26", "textAlign": "center", "textDecoration": "none", "minWidth": "110px", "borderRadius": "30px", "background": "none", "width": "auto", "fontSize": "16px", "lineHeight": "40px" }'
              :to="{ path: '/register', query: { role: item.tableName, pageFlag: 'register' } }"
              v-if="item.hasFrontRegister == '是'" v-for="(item, index) in roles"
              :key="index">注册{{ item.roleName.replace('注册', '') }}
          </router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>


export default {
  //数据集合1
  data() {
    return {
      roleMenus: [{
        "backMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-brand",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "工作人员",
            "menuJump": "列表",
            "tableName": "gongzuorenyuan"
          }], "menu": "工作人员管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-present",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "农产品分类",
            "menuJump": "列表",
            "tableName": "chanpinfenlei"
          }], "menu": "农产品分类管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-attentionfavor",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "供应商",
            "menuJump": "列表",
            "tableName": "gongyingshang"
          }], "menu": "供应商管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "农产品信息",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-addressbook",
            "buttons": ["查看", "修改", "删除"],
            "menu": "原料溯源",
            "menuJump": "列表",
            "tableName": "yuanliaosuyuan"
          }], "menu": "原料溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改", "删除"],
            "menu": "生产溯源",
            "menuJump": "列表",
            "tableName": "shengchansuyuan"
          }], "menu": "生产溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pay",
            "buttons": ["查看", "修改", "删除"],
            "menu": "仓储溯源",
            "menuJump": "列表",
            "tableName": "cangchusuyuan"
          }], "menu": "仓储溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看", "修改", "删除"],
            "menu": "物流溯源",
            "menuJump": "列表",
            "tableName": "wuliusuyuan"
          }], "menu": "物流溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-newshot",
            "buttons": ["查看", "修改"],
            "menu": "系统简介",
            "tableName": "systemintro"
          }, {
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改"],
            "menu": "轮播图管理",
            "tableName": "config"
          }, {
            "appFrontIcon": "cuIcon-news",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "系统公告",
            "tableName": "news"
          }, {
            "appFrontIcon": "cuIcon-service",
            "buttons": ["新增", "查看", "修改", "删除"],
            "menu": "留言反馈",
            "tableName": "chat"
          }, {"appFrontIcon": "cuIcon-taxi", "buttons": ["查看", "修改"], "menu": "关于我们", "tableName": "aboutus"}],
          "menu": "系统管理"
        }],
        "frontMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-form",
            "buttons": ["查看", "原料;生产;仓储;物流"],
            "menu": "农产品信息列表",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息模块"
        }],
        "hasBackLogin": "是",
        "hasBackRegister": "否",
        "hasFrontLogin": "否",
        "hasFrontRegister": "否",
        "roleName": "管理员",
        "tableName": "users"
      }, {
        "backMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["新增", "查看", "修改", "删除", "查看评论", "原料", "生产", "仓储", "物流"],
            "menu": "农产品信息",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-addressbook",
            "buttons": ["查看", "修改", "删除"],
            "menu": "原料溯源",
            "menuJump": "列表",
            "tableName": "yuanliaosuyuan"
          }], "menu": "原料溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改", "删除"],
            "menu": "生产溯源",
            "menuJump": "列表",
            "tableName": "shengchansuyuan"
          }], "menu": "生产溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pay",
            "buttons": ["查看", "修改", "删除"],
            "menu": "仓储溯源",
            "menuJump": "列表",
            "tableName": "cangchusuyuan"
          }], "menu": "仓储溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看", "修改", "删除"],
            "menu": "物流溯源",
            "menuJump": "列表",
            "tableName": "wuliusuyuan"
          }], "menu": "物流溯源管理"
        }],
        "frontMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-form",
            "buttons": ["查看", "原料;生产;仓储;物流"],
            "menu": "农产品信息列表",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息模块"
        }],
        "hasBackLogin": "是",
        "hasBackRegister": "否",
        "hasFrontLogin": "否",
        "hasFrontRegister": "是",
        "roleName": "工作人员",
        "tableName": "gongzuorenyuan"
      }, {
        "backMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["新增", "查看", "修改", "删除", "查看评论", "原料", "生产", "仓储", "物流"],
            "menu": "农产品信息",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-addressbook",
            "buttons": ["查看", "修改", "删除"],
            "menu": "原料溯源",
            "menuJump": "列表",
            "tableName": "yuanliaosuyuan"
          }], "menu": "原料溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pic",
            "buttons": ["查看", "修改", "删除"],
            "menu": "生产溯源",
            "menuJump": "列表",
            "tableName": "shengchansuyuan"
          }], "menu": "生产溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-pay",
            "buttons": ["查看", "修改", "删除"],
            "menu": "仓储溯源",
            "menuJump": "列表",
            "tableName": "cangchusuyuan"
          }], "menu": "仓储溯源管理"
        }, {
          "child": [{
            "appFrontIcon": "cuIcon-keyboard",
            "buttons": ["查看", "修改", "删除"],
            "menu": "物流溯源",
            "menuJump": "列表",
            "tableName": "wuliusuyuan"
          }], "menu": "物流溯源管理"
        }],
        "frontMenu": [{
          "child": [{
            "appFrontIcon": "cuIcon-form",
            "buttons": ["查看", "原料;生产;仓储;物流"],
            "menu": "农产品信息列表",
            "menuJump": "列表",
            "tableName": "chanpinxinxi"
          }], "menu": "农产品信息模块"
        }],
        "hasBackLogin": "是",
        "hasBackRegister": "否",
        "hasFrontLogin": "是",
        "hasFrontRegister": "是",
        "roleName": "用户",
        "tableName": "yonghu"
      }],
      loginForm: {
        username: '',
        password: '',
        tableName: '',
        code: '',
      },
      role: '',
      roles: [],
      rules: {
        username: [
          {required: true, message: '请输入账户', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      codes: [{
        num: 1,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 2,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 3,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 4,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }]
    }
  },
  created() {
    for (let item in this.roleMenus) {
      if (this.roleMenus[item].hasFrontLogin == '是') {
        this.roles.push(this.roleMenus[item]);
      }
    }
  },
  mounted() {
  },
  //方法集合
  methods: {
    randomString() {
      var len = 4;
      var chars = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
        'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
        '3', '4', '5', '6', '7', '8', '9'
      ]
      var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
      var sizes = ['14', '15', '16', '17', '18']

      var output = []
      for (var i = 0; i < len; i++) {
        // 随机验证码
        var key = Math.floor(Math.random() * chars.length)
        this.codes[i].num = chars[key]
        // 随机验证码颜色
        var code = '#'
        for (var j = 0; j < 6; j++) {
          var key = Math.floor(Math.random() * colors.length)
          code += colors[key]
        }
        this.codes[i].color = code
        // 随机验证码方向
        var rotate = Math.floor(Math.random() * 45)
        var plus = Math.floor(Math.random() * 2)
        if (plus == 1) rotate = '-' + rotate
        this.codes[i].rotate = 'rotate(' + rotate + 'deg)'
        // 随机验证码字体大小
        var size = Math.floor(Math.random() * sizes.length)
        this.codes[i].size = sizes[size] + 'px'
      }
    },
    getCurrentRow(row) {
      this.role = row.roleName;
    },
    submitForm(formName) {
      if (this.roles.length != 1) {
        if (!this.role) {
          this.$message.error("请选择登录用户类型");
          return false;
        }
      } else {
        this.role = this.roles[0].roleName;
        this.loginForm.tableName = this.roles[0].tableName;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.get(`${this.loginForm.tableName}/login`, {params: this.loginForm}).then(res => {
            if (res.data.code === 0) {
              localStorage.setItem('Token', res.data.token);
              localStorage.setItem('UserTableName', this.loginForm.tableName);
              localStorage.setItem('username', this.loginForm.username);
              localStorage.setItem('adminName', this.loginForm.username);
              localStorage.setItem('sessionTable', this.loginForm.tableName);
              localStorage.setItem('role', this.role);
              localStorage.setItem('keyPath', this.$config.indexNav.length + 2);
              this.$router.push('/index/center');
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1500,
              });
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  position: relative;
  background: url(http://codegen.caihongy.cn/20230113/40f598e8fec44a46ad02a3ebb044efb5.jpg) no-repeat center top / 100% 100%, #fff;

  .el-form-item {
    & /deep/ .el-form-item__content {
      width: 100%;
    }
  }

  .list-item /deep/ .el-input .el-input__inner {
    padding: 0 10px;
    color: #333;
    width: 100%;
    font-size: 14px;
    border-color: #ffc303;
    border-width: 0 0 1px;
    border-style: solid;
    height: 44px;
  }

  .list-code /deep/ .el-input .el-input__inner {
    border: 0;
    padding: 0 10px;
    box-shadow: 0 1px 0 #ffc303;
    outline: none;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 110px);
    font-size: 14px;
    height: 44px;
  }

  .list-type /deep/ .el-radio__input .el-radio__inner {
    background: rgba(53, 53, 53, 0);
    border-color: #666666;
  }

  .list-type /deep/ .el-radio__input.is-checked .el-radio__inner {
    background: #a1c842;
    border-color: #a1c842;
  }

  .list-type /deep/ .el-radio__label {
    color: #666666;
    font-size: 14px;
  }

  .list-type /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #a1c842;
    font-size: 14px;
  }
}</style>
